// page {
//   padding: 0;
// }
.index>view {
  margin-bottom: 60rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;


  view {
    font-size: 64rpx;
    font-weight: bold;
  }

  text {
    font-size: 32rpx;
  }
}

.order_state {
  display: flex;

  >view {
    width: 47%;
    background-color: rgb(242, 242, 242);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 0;

    >text:first-child {
      font-size: 48rpx;
      font-weight: bold;
    }

    >text:last-child {
      color: gray;
    }
  }

  >view:first-child {
    margin-right: 6%;

  }
}

.order_msg {
  >view:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    view {
      font-weight: bold;
    }
  }

  >view:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(242, 242, 242);
    font-weight: bold;
    font-size: 32rpx;
    padding: 15rpx 30rpx;
    border-radius: 10rpx;
    margin-bottom: 40rpx;
  }

  .msg_style {
    outline: 1px solid rgb(230, 230, 230);
    position: relative;
    padding: 25rpx 15rpx;
    margin-bottom: 30rpx;

    .msg_sketch {
      font-size: 30rpx;
      margin-top: 20rpx;
    }

    .msg_state {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 32rpx;
      padding: 10rpx 20rpx;
      border-radius: 5rpx;
    }
  }
}

.red_state {
  background-color: rgb(255, 80, 61);
  color: white;
}

.gray_state {
  background-color: rgb(228, 228, 228);
  color: rgb(130, 130, 130);
}